জাভাস্ক্রিপ্ট (JavaScript)

ডোম ইভেন্ট (DOM Event)

Web Development - জাভাস্ক্রিপ্ট (JavaScript) - জাভাস্ক্রিপ্ট এইচটিএমএল ডোম (JS HTML DOM) | NCTB BOOK

এইচটিএমএল ডোম এইচটিএমএল ইভেন্ট ঘটলে জাভস্ক্রিপ্টকে সে অনুযায়ী কাজ করতে সাহায্য করে:

ইভেন্টের প্রতিক্রিয়া

একটি ইভেন্ট ঘটলে জাভাস্ক্রিপ্ট সম্পাদন হতে পারে, যেমন একজন ব্যবহারকারী একটি এইচটিএমএল এলিমেন্টে ক্লিক করলে।

এইচটিএমএল এলিমেন্টে ক্লিক করলে কোড কার্যকর করার জন্য, এইচটিএমএল ইভেন্ট এট্রিবিউটে জাভাস্ক্রিপ্ট কোড যোগ করুনঃ

kt_satt_skill_example_id=1459

এইচটিএমএল ইভেন্টের উদাহরণঃ

  • ব্যবহারকারী যখন মাউস ক্লিক করে
  • যখন একটি ওয়েব পেজ লোড হয়
  • যখন একটি ইমেজ লোড হয়
  • যখন মাউস একটি এলিমেন্টের উপর নিয়ে যাওয়া হয়
  • যখন একটি ইনপুট ফিল্ড পরিবর্তিত হয়
  • যখন একটি এইচটিএমএল ফর্ম সাবমিট করা হয়
  • ব্যবহারকারী যখন একটি বাটনে চাপ দেয়।

নিচের উদাহরণে, একজন ব্যবহারকারী <h3>এলিমেন্টে ক্লিক করলে এর কন্টেন্ট পরিবর্তিত হয়ঃ

kt_satt_skill_example_id=1460

নিচের উদাহরণে, ইভেন্ট হ্যান্ডলার থেকে একটি ফাংশন কল করা হয়েছেঃ

kt_satt_skill_example_id=1462

এইচটিএমএল ইভেন্ট এট্রিবিউট

এইচটিএমএল এলিমেন্টের মধ্যে ইভেন্ট যোগ করতে ইভেন্ট এট্রিবিউট ব্যবহার করুন।

kt_satt_skill_example_id=1464

উপরোক্ত উদাহরণে, বাটনে ক্লিক করলে myFunc নামের একটি ফাংশন রান হবে।


এইচটিএমএল ডোম ব্যবহার করে ইভেন্ট যোগ করা

এইচটিএমএল ডোম আপনাকে জাভাস্ক্রিপ্টের মাধ্যমে এইচটিএমএল এলিমেন্টে ইভেন্ট যোগ করতে সাহায্য করেঃ

kt_satt_skill_example_id=1466

উপরোক্ত উদাহরণে, myFunc নামে একটি ফাংশনকে id="btn" যুক্ত একটি এইচটিএমএল button এলিমেন্টে যোগ করা হয়েছে।


Onload এবং Onunload ইভেন্ট

ব্যবহারকারী একটি পেজে প্রবেশ করলে অথবা বের হয়ে গেলে Onload এবং Onunload ইভেন্ট কাজ করে।

ব্যবহারকারীর ব্রাউজারের টাইপ এবং ব্রাউজারের ভার্সন যাচাই করার জন্য এবং ঐ তথ্যের ভিত্তিতে ওয়েবপেজের যথাযথ ভার্সন লোড করতে Onload ইভেন্ট ব্যবহার করা হয়।

Onload এবং Onunload ইভেন্টটি কুকিজের জন্যেও ব্যবহার করা যেতে পারে।

kt_satt_skill_example_id=1467

Onchange ইভেন্ট

ইনপুট ফিল্ডে Onchange ইভেন্ট ব্যবহার করা হয়।

নিচের উদাহরণে কিভাবে onchange ইভেন্টটি ব্যবহার করা হয় তা দেখানো হলোঃ

kt_satt_skill_example_id=1468

Onmouseover এবং Onmouseout ইভেন্ট

ব্যবহারকারী একটি এইচটিএমএল এলিমেন্টের উপর মাউস নিলে বা মাউস সরিয়ে নিলে একটি ফাংশন কাজ করানোর জন্য Onmouseover এবং Onmouseout ইভেন্ট ব্যবহার করা হয়ঃ

kt_satt_skill_example_id=1469

Onfocus ইভেন্ট

kt_satt_skill_example_id=1469

Content added || updated By

আরও দেখুন...

Promotion